<template>
  <div v-if="flowData" class="container">
     <div class="head">
      <!-- intro -->
      <div class="intro">
        <div class="apply">
          <div class="text">申请日期</div>
          <div class="time">{{flowData.applicant.apply_date}}</div>
        </div>
        <div class="info">
          <div class="info-base">
            <div class="name">
              {{flowData.applicant.apply_username}} | <span class="department">{{flowData.applicant.apply_department}}</span>
            </div>
            <div class="phone">{{flowData.applicant.apply_phone}}</div>
          </div>
          <div class="info-name">{{flowData.applicant.nameinfo}}</div>
        </div>
      </div>
    </div>
    <div class="progress">
        <div v-for="(item, index) in flowData.list" :key="index" class="progress-stage" :class=" {fail:flowData.list[index+1] && !flowData.list[index+1].status} ">
            <div class="progress-status">
                <img v-if="item.status" src="@/assets/svg/quanxuan_selected.svg" alt="">
                <img v-else src="@/assets/svg/jujue.svg" alt="">
            </div>
            <div class="progress-content">
                <div class="headline">
                    <time>{{item.date}}</time>
                </div>
                <div class="progress-info">
                    <p>{{item.message}}</p>
                </div>
            </div>
        </div>
    </div>
    <goback></goback>
  </div>
</template>

<script>
import { oaRecord } from "@/api/service.js";
import Goback from '@/components/goback.vue';
export default {
  components:{
    Goback
  },
  data() {
    return {
        id:'',
        flowData:''
    };
  },

  mounted() {
      console.log(this.$route.query.id)
      this.id = this.$route.query.id;
      this.getData()
  },

  methods: {
      getData(){
          let that = this;
          oaRecord({
              id:that.id
          })
          .then((res) => {
              console.log(res.data)
              if(res.status == 'success'){
                  res.data.applicant.nameinfo = res.data.applicant.apply_username.slice(0,1);
                  that.flowData = res.data
              }
          })
      }
  },
};
</script>


<style lang="less">
.container {
  min-height: 100vh;
  background: #f7f9f9;
}
.head {
  .intro {
    background: #009966;
    .apply {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      margin: 0 15px;
      line-height: 35px;
      height: 35px;
      justify-content: space-between;
      .text,
      .time {
        color: #fff;
        font-size: 12px;
      }
    }
    .info {
      display: flex;
      justify-content: space-between;
      padding: 20px 15px 20px 20px;
      .info-base {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .name {
        font-size: 19px;
        font-weight: bold;
        color: #fff;
      }
      .department {
        font-size: 14px;
        color: #fff;
      }
      .phone {
        margin-top: 8px;
        font-size: 13px;
        color: #fff;
      }
      .info-name {
        position: relative;
        font-size: 17px;
        color: #009966;
        line-height: 51px;
        text-align: center;
        width: 51px;
        height: 51px;
        background: #ffffff;
        border-radius: 50%;
        &::after {
          position: absolute;
          top: -5px;
          left: -5px;
          width: 59px;
          height: 59px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.5);
          content: "";
          background: transparent;
        }
      }
    }
  }
}
.progress{
    padding: 20px 16px;
    box-sizing: border-box;
    .progress-stage{
        display: flex;
        flex-direction: row;
        padding-bottom: 20px;
        position: relative;
        &::after{
            content: '';
            position: absolute;
            top: 18px;
            left: 7px;
            width: 1px;
            height: calc(100% - 14px);
            background: #009966;
        }
        &.fail{
            &::after{
                background:#FA4E3E ;
            }
        }
        &:last-child{
            &::after{
                width: 0;
            }
        }
        .progress-status{
            padding-top: 4px;
            margin-right: 10px;
            position: relative;
            z-index: 10;
            img{
                width: 14px;
            }
        }
        .progress-content{
            flex-grow: 1;
            h3{
            margin: 0;
              color: #313541;  
              font-size: 15px;
              font-weight: 600;
            }
            time{
                color: #939DAD;
                font-size: 12px;
                margin-top: 6px;
            }
            .progress-info{
                margin-top:16px;
                background: #ffffff;
                border-radius: 10px;
                padding: 0 16px;
                box-sizing: border-box;
                h4{
                    margin: 0;
                    color: #313541;
                    font-size: 17px;
                    border-width: 600;
                    padding: 16px 0;
                    border-bottom: 1px solid #F2F2F2;
                    span{
                        font-size: 13px;
                        font-weight: normal;
                    }
                }
                p{
                    margin: 0;
                    padding: 16px 0;
                    color: #313541;
                    font-size: 13px;
                    line-height: 1.5;
                }
            }
        }
    }
}
</style>